<template>
	<view class="index">
		<view class="u-nav-slot" slot="left" @click="left">
			<u-icon name="arrow-left" color="#000000" size="24" :bold="true"></u-icon>
			<view class="text">动态发布</view>
		</view>
		<view class="content">
			<view class="text">
				<u-textarea v-model="content" :cursorSpacing="100" border="none" :height="212" :maxlength="50"
					placeholder="这一刻的想法..." count>
				</u-textarea>
			</view>
			<view class="upload">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"
					width="200" height="200"></u-upload>
			</view>
		</view>
		<view class="bottom-btn flex-center">
			<view class="row_btn" @click="pushcontent">发布</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { shallowRef, reactive, ref } from "vue";
import { addMoment } from '@/api/dongtai';
const content = ref('');
type fileListType = {
	status: string,
	message: string,
	url: string,
	size: number,
	thumb: string,
	type: string
}
const fileList = ref<fileListType[]>([]);
// 删除图片
const deletePic = (event: { index: number }) => {
	fileList.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event: { file: [] }) => {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists: { url: string }[] = [].concat(event.file);
	let fileListLen = fileList.value.length;
	lists.map((item: any) => {
		fileList.value.push({
			...item,
			status: 'uploading',
			message: '上传中',
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		let item = fileList.value[fileListLen];
		fileList.value.splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result,
		});
		fileListLen++;
	}
};

const uploadFilePromise = (url: string) => {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: import.meta.env.VITE_BASE_URL + '/common/upload',
			filePath: url,
			name: 'file',
			header: {
				Authorization: uni.getStorageSync('token')
			},
			formData: {
				'file': 'file',
			},
			success: (res) => {
				setTimeout(() => {
					let dataing = JSON.parse(res.data)
					resolve(dataing.fileName);
				}, 1000);
			},
		});
	});
};
// 发布
const pushcontent = async () => {
	const obj = {
		images: '',
		content: content.value
	}
	fileList.value.map((item: { url: string }) => {
		if (obj.images === '') {
			obj.images = item.url
		} else {
			obj.images = obj.images + ',' + item.url
		}
	})
	const { code } = await addMoment(obj);
	if (code === 200) {
		uni.showToast({
			title: '发布成功',
			icon: 'success',
			duration: 2000
		})
		uni.switchTab({ url: "/Layout/dongtai" });
	} else {
		uni.showToast({
			title: '操作失败，请重试',
			icon: 'error',
			duration: 2000
		})
	}
}
// 返回
const left = () => {
	uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.index {
	padding-top: 66rpx;
	height: 95vh;
	background: #fff;

}

.content {

	.upload {
		padding: 20rpx 40rpx;
	}

	.text {
		width: 686rpx;
		height: 248rpx;
		background: rgba(159, 181, 235, 0.07);
		opacity: 1;
		border: 2rpx solid #d1deff;
		margin: 0 auto;
		border-radius: 30rpx;
		margin-top: 28rpx;
	}
}

.u-nav-slot {
	padding-left: 20rpx;
	z-index: 100;
	display: flex;

	.text {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
		line-height: 40rpx;
		margin: 0 270rpx;
	}
}



.row_btn {
	width: 80%;
	height: 100upx;
	text-align: center;
	background-image: linear-gradient(to right, #fba3d9, #fe7e97);
	color: #ffffff;
	margin: 80upx auto;
	border-radius: 60upx;
	line-height: 100upx;
	position: fixed;
	bottom: 60rpx;
	left: 80rpx;
}
</style>
